<template>
	<div class="bg">
		<div class="hotlist">
			<span class="img" v-for='item in HotList'>
				<img :src="item.imgUrl" alt="">
			</span>
			<span class="hotlist_title">
				本周热门榜单
			</span>
			<span class="all">
				全部榜单
			</span>
		</div>
		<div class="ImgList">
			<ul>
				<li v-for='item in HotLists'>
					<div class="ImgList_img">
						<img :src="item.imgUrl" alt="">
					</div>
					<div class="dt">
						{{item.title}}
					</div>
					<div class="dd">
						<i>
						{{item.yuan}}
						</i>起
					</div>
				</li>
			</ul>
		</div>
	</div>	
</template>
<script type="text/javascript">
	export default {
		props:['HotList','HotLists']
	}
</script>
<style type="text/css" scoped>
	.hotlist{
		background: none !important;
		position: relative;
	    padding: .24rem 0 .26rem;
	    color: #212121;
	    font-size: .28em;
	    line-height: 1;
	}
	.img img{
		display: inline-block;
	    overflow: hidden;
	    width: .3rem;
	    height: .3rem;
	    margin-left: .2rem;
	}
	.hotlist_title{
		    display: inline-block;
    margin-left: .08rem;
    height: .44rem;
    color: #212121;
    font-size: .32rem;
    line-height: .44rem;
	}
	.all{
		    position: absolute;
    top: .36rem;
    right: .32rem;
    color: #616161;
    font-size: .24rem;
    line-height: .28rem;
	}
	.ImgList ul{
		padding: 0 .24rem;
		overflow-x: scroll;
		white-space: nowrap;
		color: #212121;
	    font-size: .28em;
	    line-height: 1;
	}
	.ImgList ul li{
		position: relative;
    display: inline-block;
    padding: .06rem 0 .2rem;
    width: 2rem;
    color: #212121;
    font-size: .28em;
    line-height: 1;

	}
	.ImgList_img img{
		width: 1.9rem;
		height: 1.9rem;
	}
	.ImgList_img{
    background: none !important;
        overflow: hidden;
    width: 2rem;
    height: 0;
    padding-bottom: 100%;
    display: block;
	}
	.dt{
    margin-top: .12rem;
    color: #212121;
    font-size: .24rem;
    line-height: .32rem;
    text-align: center;
        overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
	}
	.dd{
    color: #616161;
    font-size: .24rem;
    line-height: .36rem;
    text-align: center;
	}
	.dd i{
		color: red
	}

</style>